<template>
  <div class="reset-mobile">
    <div class="reset-mobile-return">
      <el-button plain icon="el-icon-back" type="text" @click="returnTo()">返回</el-button>
    </div>
    <div class="reset-mobile-main">
      <img src="./../assets/logo.png" draggable="false">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px">
        <el-form-item prop="mobileNumber">
          <el-input v-model="ruleForm.mobileNumber" placeholder="手机号码"></el-input>
        </el-form-item>
        <el-form-item prop="mobileCode">
          <el-input class="reset-mobile-input-code" v-model="ruleForm.mobileCode" placeholder="手机验证码"></el-input>
          <el-button :disabled="isDisabled" type="primary" size="medium" @click="getCode()">
            <span v-show="show">获取</span>
            <span v-show="!show" class="count">{{count}} s</span>
          </el-button>
        </el-form-item>
      </el-form>
      <el-button round type="success" @click="update()">修改</el-button>
    </div>
    <div class="reset-mobile-power">
      © 2021 Powered by zsc ccying
    </div>
  </div>
</template>

<style>
  .reset-mobile {
    width: 600px;
    margin: auto;
  }
  .reset-mobile-return {
    padding-right: 600px;
  }
  .reset-mobile-input-code {
    width: 440px;
  }
  .reset-mobile-power {
    padding-top: 100px;
  }
</style>

<script>
  export default {
    data() {
      return {
        ruleForm: {
          mobileNumber: '',
          mobileCode: '',
        },
        rules: {
          mobileNumber: { required: true, message: '请输入手机号码', trigger: 'blur' },
          mobileCode: { required: true, message: '请输入手机验证码', trigger: 'blur' }
        },
        isDisabled: false,
        show: true,
        count: '',
        timer: null,
      }
    },
    methods: {
      returnTo() {
        this.$router.go(-1);
      },
      getCode() {
        //倒计时时间
        const TIME_COUNT = 60;
        if (!this.timer) {
          this.count = TIME_COUNT;
          this.show = false;
          this.isDisabled = true;
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--;
            } else {
              this.show = true;
              // 清除定时器
              clearInterval(this.timer);
              this.timer = null;
            }
          }, 1000)
        };
        this.$http({
          method: 'get',
          url: '/send',
          params: {
            mobileNumber: this.ruleForm.mobileNumber
          }
        })
      },
      update() {
        this.$http({
          method: 'post',
          url: '/reset-mobile',
          data: this.$qs.stringify({
            mobileNumber: this.ruleForm.mobileNumber,
            mobileCode: this.ruleForm.mobileCode
          })
        }).then(res=>{
          let {code:code, data:data} = res.data;
          if (code === 200) {
            var user = JSON.stringify(data);
            sessionStorage.setItem('user', user);
            alert("成功")
            this.$router.go(-2);
          } else if (code === 1500) {
            alert("手机号码已被绑定，请更换其他手机号")
          } else if (code === 1400) {
            alert("验证码已过期")
          }
        })
      }
    }
  }
</script>
